<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>注册 - 钢域云贸</title>
    <link rel="icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="shortcut icon" href="/uploads/logo.png" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/bootstrap.min.css" type="text/css" media="all"/>
    <link rel="stylesheet" type="text/css" href="/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" th:href="@{/css/amazeui.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/register.css}"/>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/js/jquery-latest.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/amazeui.min.js"></script>
    <style>
        /* 表单样式优化 */
        .form-label {
            font-weight: 500;
            color: #4b5563;
        }
        .form-input {
            transition: all 0.2s ease-in-out;
        }
        .form-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }
        /* 主内容区域样式 */
        main {
            display: flex;
            min-height: calc(100vh - 64px - 64px); /* 减去 header 和 footer 高度（假设各 64px） */
            width: 100%;
        }
        /* 侧边栏样式 */
        .sidebar {
            width: 256px; /* 保持当前宽度 */
            background-color: #fff;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }
        /* 内容区域样式 */
        .content-area {
            flex: 1;
            padding: 2rem;
            background-color: #f7fafc; /* 匹配背景色 */
        }
        /* 确保侧边栏内容区自适应 */
        .sidebar nav {
            flex-grow: 1;
        }
        /* 响应式布局 */
        @media (max-width: 640px) {
            .sidebar {
                display: none;
            }
            .content-area {
                padding: 1rem;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Main Content -->
<main>
    <!-- 内容区域 -->
    <div class="content-area">
        <div class="bg-white p-8 rounded-xl shadow-lg">
            <!-- 用户注册form表单 -->
            <div>
                <h2 th:text="#{register.tip}">注册账号</h2>
                <form th:action="@{/register}" method="post" th:object="${user}" class="space-y-6 max-w-2xl mx-auto bg-white p-8 rounded-xl shadow">
                    <div>
                        <label for="username" class="block text-gray-700 font-medium mb-2" th:text="#{register.username}">用户名</label>
                        <input type="text" th:field="*{username}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm" required>
                    </div>

                    <div>
                        <label for="password" class="block text-gray-700 font-medium mb-2" th:text="#{register.password}">密码</label>
                        <input type="password" th:field="*{password}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm" required>
                    </div>

                    <div>
                        <label for="confirmPassword" class="block text-gray-700 font-medium mb-2" th:text="#{register.password2}">确认密码</label>
                        <input type="password" name="confirmPassword" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm" required>
                    </div>

                    <div>
                        <label for="email" class="block text-gray-700 font-medium mb-2" th:text="#{register.email}">邮箱</label>
                        <input type="email" th:field="*{email}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm" required>
                    </div>

                    <div>
                        <label for="phone" class="block text-gray-700 font-medium mb-2" th:text="#{register.phone}">电话</label>
                        <input type="text" th:field="*{phone}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                    </div>

                    <div>
                        <label for="companyName" class="block text-gray-700 font-medium mb-2" th:text="#{register.company}">公司名称</label>
                        <input type="text" th:field="*{company}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                    </div>

                    <div>
                        <label for="address" class="block text-gray-700 font-medium mb-2" th:text="#{register.address}">地址</label>
                        <input type="text" th:field="*{address}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm">
                    </div>

                    <div>
                        <label for="role" class="block text-gray-700 font-medium mb-2" th:text="#{register.role}">角色</label>
                        <select th:field="*{role}" class="w-full px-4 py-3 rounded-lg text-sm border border-gray-300 focus:ring-2 focus:ring-blue-300 shadow-sm" required>
                            <option th:each="r : ${roles}" th:value="${r}"
                                    th:text="${#messages.msgOrNull('role.' + r) != null} ? ${#messages.msg('role.' + r)} : ${r}">
                            </option>
                        </select>
                    </div>

                    <div th:if="${error}" class="mb-6 p-4 bg-red-100 text-red-700 rounded-lg">
                        <span th:text="${error}"></span>
                    </div>

                    <div class="flex justify-end gap-4 pt-4 border-t border-gray-200">
                        <button type="submit" class="px-5 py-2 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700 transition shadow" th:text="#{register.button}">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<!-- 公共底部 -->
<th:block th:replace="~{/footer.html}"></th:block>

<script src="/js/jquery-latest.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/amazeui.min.js"></script>
</body>
</html>